﻿<!DOCTYPE html>
<HTML>
<HEAD>
  <TITLE> ZTREE DEMO - big data page</TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
  <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
  <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
  <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>
  <SCRIPT type="text/javascript">
    <!--
    var setting = {
      async: {
        enable: true,
        url: getUrl
      },
      check: {
        enable: true
      },
      data: {
        simpleData: {
          enable: true
        }
      },
      view: {
        addDiyDom: addDiyDom
      },
      callback: {
        beforeExpand: beforeExpand,
        onAsyncSuccess: onAsyncSuccess,
        onAsyncError: onAsyncError
      }
    };

    var zNodes = [
      { name: "分页测试", t: "请点击分页按钮", id: "1", count: 2000, page: 0, pageSize: 100, isParent: true }
    ];
    var curPage = 0;

    function getUrl(treeId, treeNode) {
      var param = "id=" + treeNode.id + "_" + treeNode.page + "&count=" + treeNode.pageSize,
        aObj = $("#" + treeNode.tId + "_a");
      aObj.attr("title", "当前第 " + treeNode.page + " 页 / 共 " + treeNode.maxPage + " 页");
      return "../asyncData/getNodesForBigData.php?" + param;
    }

    function goPage(treeNode, page) {
      treeNode.page = page;
      if (treeNode.page < 1) treeNode.page = 1;
      if (treeNode.page > treeNode.maxPage) treeNode.page = treeNode.maxPage;
      if (curPage == treeNode.page) return;
      curPage = treeNode.page;
      var zTree = $.fn.zTree.getZTreeObj("treeDemo");
      zTree.reAsyncChildNodes(treeNode, "refresh");
    }

    function beforeExpand(treeId, treeNode) {
      if (treeNode.page == 0) treeNode.page = 1;
      return !treeNode.isAjaxing;
    }

    function onAsyncSuccess(event, treeId, treeNode, msg) {

    }

    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
      var zTree = $.fn.zTree.getZTreeObj("treeDemo");
      alert("异步获取数据出现异常。");
      treeNode.icon = "";
      zTree.updateNode(treeNode);
    }

    function addDiyDom(treeId, treeNode) {
      if (treeNode.level > 0) return;
      var aObj = $("#" + treeNode.tId + "_a");
      if ($("#addBtn_" + treeNode.id).length > 0) return;
      var addStr = "<span class='button lastPage' id='lastBtn_" + treeNode.id
        + "' title='last page' onfocus='this.blur();'></span><span class='button nextPage' id='nextBtn_" + treeNode.id
        + "' title='next page' onfocus='this.blur();'></span><span class='button prevPage' id='prevBtn_" + treeNode.id
        + "' title='prev page' onfocus='this.blur();'></span><span class='button firstPage' id='firstBtn_" + treeNode.id
        + "' title='first page' onfocus='this.blur();'></span>";
      aObj.after(addStr);
      var first = $("#firstBtn_" + treeNode.id);
      var prev = $("#prevBtn_" + treeNode.id);
      var next = $("#nextBtn_" + treeNode.id);
      var last = $("#lastBtn_" + treeNode.id);
      treeNode.maxPage = Math.round(treeNode.count / treeNode.pageSize - .5) + (treeNode.count % treeNode.pageSize == 0 ? 0 : 1);
      first.bind("click", function() {
        if (!treeNode.isAjaxing) {
          goPage(treeNode, 1);
        }
      });
      last.bind("click", function() {
        if (!treeNode.isAjaxing) {
          goPage(treeNode, treeNode.maxPage);
        }
      });
      prev.bind("click", function() {
        if (!treeNode.isAjaxing) {
          goPage(treeNode, treeNode.page - 1);
        }
      });
      next.bind("click", function() {
        if (!treeNode.isAjaxing) {
          goPage(treeNode, treeNode.page + 1);
        }
      });
    };

    $(document).ready(function() {
      $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
    //-->
  </SCRIPT>
  <style type="text/css">
    .ztree li span.button.firstPage {
      background-position: -144px -16px;
      float: right;
      margin-left: 2px;
      margin-right: 0;
      vertical-align: top;
      *vertical-align: middle
    }

    .ztree li span.button.prevPage {
      background-position: -144px -48px;
      float: right;
      margin-left: 2px;
      margin-right: 0;
      vertical-align: top;
      *vertical-align: middle
    }

    .ztree li span.button.nextPage {
      background-position: -144px -64px;
      float: right;
      margin-left: 2px;
      margin-right: 0;
      vertical-align: top;
      *vertical-align: middle
    }

    .ztree li span.button.lastPage {
      background-position: -144px -32px;
      float: right;
      margin-left: 2px;
      margin-right: 0;
      vertical-align: top;
      *vertical-align: middle
    }
  </style>
</HEAD>

<BODY>
<h1>分页加载大数据量</h1>
<h6>[ 文件路径: bigdata/page.html ]</h6>
<div class="content_wrap">
  <div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
  </div>
  <div class="right">
    <ul class="info">
      <li class="title">
        <h2>1、大数据量加载说明</h2>
        <ul class="list">
        <li>1)、分页方案可以有效解决某一级节点数据超大的情况。</li>
        <li>2)、分页按钮通过自定义控件的方法实现。</li>
        <li class="highlight_red">3)、分页方案对于 checkbox 的关联关系无能为力，只能每次翻页后进行修正。由于时间关系，Demo 中不对 checkbox 的关联进行任何修正处理。</li>
        <li class="highlight_red">4)、分页方案中，从 zTree 得到的节点数据只有当前页的节点数据，可以在每次翻页后自行保存每页的数据，作为缓存，具体情况要根据实际需求来决定。</li>
      </li>
      <li class="title">
        <h2>2、setting 配置信息说明</h2>
        <ul class="list">
          <li>需要设置 setting.async 异步加载部分的参数</li>
          <li>其他不需要进行特殊的配置，根据自己的需求自行设置</li>
        </ul>
      </li>
      <li class="title">
        <h2>3、treeNode 节点数据说明</h2>
        <ul class="list">
          <li>对 节点数据 没有特殊要求，用户可以根据自己的需求添加自定义属性</li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</BODY>
</HTML>